<template>
  <ul class="evaluate-list">
    <!--对接真实接口:key使用ID来区别-->
    <li v-for="(item,index) in list" :key="index">
      <div class="head">
        <img :src="item.user.head">
      </div>
      <div class="con">
        <div class="phone">{{item.user.phone}}</div>
        <div class="star"><star :score="item.score" :size="24"></star></div>
        <div class="text">{{item.content}}</div>
      </div>
    </li>
    <li class="empty" v-if="!list.length">暂无评论内容</li>
  </ul>
</template>

<script>
  import star from '@/components/star/star'
  export default {
    props: {
      list:Array,
    },
    name: '',
    data() {
      return {
      }
    },
    components:{
      star
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .evaluate-list{
    li{
      &:last-child{
        border-bottom: none;
      }
      border-bottom: 1px dotted @color-border;
      padding: 15px 0;
      display: flex;
      .head{
        border-radius: 50%;
        overflow: hidden;
        width: 35px;
        height: 35px;
        img{
          width: 35px;
          height: 35px;
        }
      }
      .con{
        margin-left: 10px;
        flex: 1;
        font-size: @font-size-medium;
        .phone{
          padding-bottom: 5px;
        }
        .text{
          padding-top: 14px;
          color: @color-text-b;
          line-height: 1.2em;
        }
      }
    }
    .empty{
      font-size: @font-size-medium;;
      text-align: center;
    }
  }
</style>
